<template>
    <div class='xtx-goods-page'>
        <!-- GoodsDetail是通过发请求获取到的值，初始值是空对象，空对象取属性是undefined
        如果继续访问属性，会报错
        解决方法：通过v-if对外层盒子做条件判断
        （检测对象中是否存在某个属性，如果存在，说明已经请求好数据并赋值成功这时才渲染后续的内容）
        -->
      <div class="container" v-if="GoodsDetail.id">
        <!-- 面包屑 -->
        <XtxBread>
          <XtxBreadItem to="/">首页</XtxBreadItem>
          <XtxBreadItem v-for="item in categories" :key="item.id">
            {{item.name}}
          </XtxBreadItem>
          <!-- 一级商品分类 -->
          <!-- <XtxBreadItem :to="`/category/${GoodsDetail.categories[0].id}`"> -->
            <!-- {{GoodsDetail.categories[1].name}}</XtxBreadItem> -->
          <!-- 二级商品分类 -->
          <!-- <XtxBreadItem :to="`/category/sub/${GoodsDetail.categories[0].id}`"> -->
            <!-- {{GoodsDetail.categories[0].name}}</XtxBreadItem> -->
          <!--当前商品详情  -->
          <!-- <XtxBreadItem >{{GoodsDetail.name}}</XtxBreadItem> -->
        </XtxBread>
        <!-- 商品信息 -->
        <div class="goods-info">
           <!--------------- 图片预览区 --------------->
            <div class="media">
              <!-- 图片预览 -->
              <XtxImageView :imageList="GoodsDetail.mainPictures"></XtxImageView>
              <!-- 统计数量 -->
              <GoodsSale :goods="GoodsDetail"></GoodsSale>
            </div>
            <!-------------- 商品信息区 --------------->
            <div class="spec">
              <!-- 商品信息 -->
              <GoodsInfo :goods="GoodsDetail"></GoodsInfo>
              <!-- 商品规格 -->
              <!-- 传递一个自定义事件 -->
              <GoodsSku :goods="GoodsDetail" @finish="f"></GoodsSku>
              <!-- 商品加购数量  v-model语法糖双向绑定 传入商品库存最大值-->
              <XtxNumbox v-model="num" :max="GoodsDetail.inventory"></XtxNumbox>
              <!-- <XtxNumbox :modelValue="num" @update:modelValue></XtxNumbox> -->
              <!-- 加入购物车按钮 -->
              <XtxButton
              @click="handleInsertCart"
               type="primary"
               size="middle"
               style="margin-top:20px">
               加入购物车</XtxButton>
            </div>
        </div>
        <!-- 商品详情 -->
        <div class="goods-footer">

          <div class="goods-article">
            <!-- 商品+评价 -->
            <div class="goods-tabs">
              <GoodsDetail :goods="GoodsDetail"></GoodsDetail>
            </div>
          </div>
          <!-- 24热榜+专题推荐 -->
          <div class="goods-aside">
            <GoodsHot :type="1" />
            <GoodsHot :type="2" />
            <GoodsHot :type="3" />
          </div>
        </div>
      </div>
    </div>
  </template>

<script>
import { getGoodsDetailAPI } from '@/api/goods'
import { ref, computed } from 'vue'
import GoodsInfo from './component/goods-info.vue'
import GoodsSale from './component/goods-sale.vue'
import GoodsSku from './component/goods-sku.vue'
import GoodsDetail from './component/goods-detail.vue'
import GoodsHot from './component/goods-hot.vue'
// 导入路由应用
import { useRoute } from 'vue-router'
import { useStore } from 'vuex'
import { message } from '@/components/Message'
// useRouter() =>route =>this.$route => 获取路由参数
// useRoute() =>router =>this.$router =>  路由跳转

export default {
  name: 'XtxGoodsPage',
  components: {
    GoodsInfo,
    GoodsSale,
    GoodsSku,
    GoodsHot,
    GoodsDetail

  },
  setup () {
    const route = useRoute()
    const store = useStore()
    // ----------------------------------------------------------
    getGoodsDetail()
    // 初始化商品详情数据
    const GoodsDetail = ref({})
    // 发起获取商品详情
    getGoodsDetail()
    // 获取商品详情
    async function getGoodsDetail () {
      // 发起获取商品详情请求
      const res = await getGoodsDetailAPI(route.params.id)
      // 赋值
      GoodsDetail.value = res.result
    }
    const categories = computed(() => {
      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
      return GoodsDetail.value.categories.sort((o1, o2) => o1.layer - o2.layer)
    })
    // ------------------------------------------------------------
    // 当前选择的规格,先默认为null
    let sku = null
    // 当子组件goods-sku 选择完毕规格之后，需要把对应的数据传过来
    const f = (skuObj) => {
      // console.log(skuObj)
      // 更新goodObj的原价和现价（规格不同，价格不同）
      GoodsDetail.value.oldPrice = skuObj.oldPrice
      GoodsDetail.value.price = skuObj.price
      // 保存规格,更新最大数量
      GoodsDetail.value.inventory = skuObj.inventory
      // GoodsDetail.value = {
      //   ...GoodsDetail.value,
      //   ...skuObj
      // }
      // 保存选择的规格
      // eslint-disable-next-line no-const-assign
      sku = skuObj
    }
    // ------------------------------------------------------------
    // 搜集计数值，默认是1
    // 传递给计数子组件
    const num = ref(1)
    // 加入购物车
    const handleInsertCart = async () => {
      // 1.判断是否选择了完整的规格
      if (!sku) {
        return message({ type: 'warn', text: '请选择完整规格' })
      }
      // 2.如果选好了完整的规格，则加入购物车
      // 组装一个商品对象参数，作为添加购物车的参数
      const goodsObj = {
        id: GoodsDetail.value.id,
        name: GoodsDetail.value.name,
        picture: GoodsDetail.value.mainPictures[0],
        skuId: sku.id,
        price: sku.oldPrice,
        nowPrice: sku.price,
        attrsText: sku.specText,
        stock: sku.inventory,
        selected: true,
        isEffective: true,
        count: num.value
      }
      // 调用action ，传入商品对象参数，加入购物车
      // 使用 await 将异步代码转为同步执行顺序
      await store.dispatch('car/insertCartAction', goodsObj)
      // 加入成功提示
      message({ type: 'success', text: '加入购物车' })
    }

    return {
      GoodsDetail,
      categories,
      f,
      num,
      handleInsertCart,
      sku
    }
  }
}
</script>

  <style scoped lang='less'>
   .goods-info {
      min-height: 600px;
      background: #fff;
      display: flex;
      .media {
        width: 580px;
        height: 600px;
        padding: 30px 50px;
      }
      .spec {
        flex: 1;
        padding: 30px 30px 30px 0;
      }
    }
  .goods-footer {
    display: flex;
    margin-top: 20px;
    .goods-article {
      width: 940px;
      margin-right: 20px;
    }
    .goods-aside {
      width: 280px;
      min-height: 1000px;
    }
  }
  .goods-tabs {
    min-height: 600px;
    background: #fff;
  }
  .goods-warn {
    min-height: 600px;
    background: #fff;
    margin-top: 20px;
  }
  </style>
